<template>
  <h1>我的购物车</h1>
  <el-button type="primary" @click="qiehuan">切换</el-button>
  <div v-if="show">
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="商品图片"
          >
        <div class="demo-image">
          <div class="block" :model="fits">
            <el-image
                style="width: 100px; height: 100px"
                :src="url"
                :fit="fit"></el-image>
          </div>
        </div>
      </el-table-column>
      <el-table-column
          label="商品名"
          >
      </el-table-column>
      <el-table-column
          label="数量"
         >
        <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
      </el-table-column>
      <el-table-column
          label="单价"
         >
      </el-table-column>
      <el-table-column
          label="总价"
         >
      </el-table-column>
      <el-table-column
          label="操作"
         >
        <el-button type="danger">移除商品</el-button>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content: space-between;padding: 0 20px 0 20px">
      购物车总价：{{}}
      <el-button type="primary" @click="$router.push('heduiorder')" >立即下单</el-button>
    </div>

  </div>
  <div v-if="show1">
    <el-empty description=选件心仪的商品吧></el-empty>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      show1:true,
      productList:[{name:"1"}],
      num:1,
      fits: 'scale-down',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },],
    }
  },
  methods:{
    qiehuan(){
      if (this.show){
        this.show = false
      }else {
        this.show = true
      }
      if (this.show1){
        this.show1 = false
      }else {
        this.show1 = true
      }
    }
  }
}
</script>

<style scoped>

</style>